<template>
    <div class="departSelect">
        <div><el-button @click="selectTagClick">标签选择器</el-button></div>
        <ul>
            <p v-if="selectTag.length">选择的标签</p>
            <li v-for="(item,index) in selectTag" :key="index">{{ item.name }}</li>
        </ul>
        <div><el-button @click="selectPeopleClick">人员选择器</el-button></div>
        <ul>
            <p v-if="selectPeople.length">选择的人员</p>
            <li v-for="(item,i) in selectPeople" :key="i">{{ item.EMPVORGANIZATION_CNAME }}</li>
        </ul>
        <select-tag ref="SelectTag" @select="selectTagFunc"/>
        <select-people ref="SelectPeople" @select="selectPeopleFunc"/>
    </div>

</template>

<script>
import SelectPeople from '@/components/SelectPeople'
import SelectTag from '@/components/SelectTag'
export default {
    components: {
        SelectPeople,
        SelectTag
    },
    data() {
        return {
            // 选择的人员容器
            selectPeople: [],
            selectTag: []
        }
    },
    methods: {
        // 选择的人员
        selectPeopleFunc(data) {
            this.selectPeople = data
        },
        // 选择的标签
        selectTagFunc(data) {
            this.selectTag = data
        },
        // 打开人员选择器
        selectPeopleClick() {
            this.$refs.SelectPeople.visible = true
        },
        // 打开标签选择器
        selectTagClick() {
            this.$refs.SelectTag.visible = true
        }
    }
}
</script>
<style lang="scss" scoped>
    .departSelect{
        >div{
            margin-top: 20px;

        }
        p{
            font-size: 20px;
        }
         ul{
            margin-top: 20px;
            li{
                margin-top: 10px;
                display: inline-block;
                margin-right: 20px;
            }
        }
   }

</style>

